<template>
    <div class="container">
        <h1 style="margin-bottom: 20px; text-align: center;">学生登录</h1>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules"
            label-width="auto" class="demo-ruleForm">
            <el-form-item label="用户名" prop="pass" style="font-weight: bold; width: 500px;">
                <el-input v-model="ruleForm.pass" type="text" autocomplete="off" style="opacity:0.8" />
            </el-form-item>
            <el-form-item label="密码" prop="checkPass" style="font-weight: bold;width: 500px;">
                <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" style="opacity:0.8" />
            </el-form-item>
            <el-form-item label="验证码" style="font-weight: bold;">
                <el-input type="text" v-model="ruleForm.captcha" autocomplete="off" style="opacity:0.8 ;width: 300px;" />
                <el-image style="width: 120px; height: 38px" :src="captchaImageBase64Data" @click="getCaptcha"/>
            </el-form-item>
            <el-form-item style="margin: 30px 0  20px 100px; display: flex;">
                <el-button type="primary" @click="submitForm" size="large" plain>登录</el-button>
                <el-button @click="resetForm" size="large" plain>重置</el-button>
                <el-button type="warning" @click="change" size="large" plain>管理员身份</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import adminStudentApi from '@/api/adminStudentApi';

import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router';
import { useTokenStore } from '@/stores/token.js';//使用store
const tokenStore = useTokenStore();

const router = useRouter();

const ruleFormRef = ref<FormInstance | null>(null);

const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('学生用户名不能为空'));
    } else {
        if (ruleForm.pass !== '') {
            if (!ruleFormRef.value) return;
            ruleFormRef.value.validateField('checkPass');
        }
        callback();
    }
}

const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('登录密码不能为空'));
    } else {
        callback();
    }
}

const ruleForm = reactive({
    pass: '',
    checkPass: '',
    captchaId: '',
    captcha: "",
});
const captchaImageBase64Data = ref("");
const rules = reactive<FormRules>({
    pass: [{ validator: validatePass, trigger: 'blur' }],
    checkPass: [{ validator: validatePass2, trigger: 'blur' }],
});

const submitForm = () => {
    ruleFormRef.value?.validate((valid) => {
        if (valid) {
            login();
        } else {
            ElMessage.error('请填写学生用户名和密码');
        }
    });
}

const resetForm = () => {
    ruleFormRef.value?.resetFields();
}


// 登录
function login() {
    adminStudentApi.loginStudent({ sno: ruleForm.pass, spassword: ruleForm.checkPass, captchaId: ruleForm.captchaId, captcha: ruleForm.captcha  })
        .then(resp => {
            //console.log(resp.msg)
            if (resp.code == 10000) {
                ElMessage.success({
                    message: resp.msg,
                    duration: 1200,
                    onClose: () => {
                        //sessionStorage.setItem('token', resp.data);
                        tokenStore.update(resp.data)
                        router.push('/welcome');
                    }
                });
            } else {
                ElMessage.error(resp.msg);
            }
        });
}
function getCaptcha() {
    adminStudentApi.captcha()
        .then(resp => {
            ruleForm.captchaId = resp.data.captchaId;
            captchaImageBase64Data.value = resp.data.captchaImageBase64Data
        })
}
getCaptcha()
//跳转
function change() {
    router.push('/login');
}
</script>

<style scoped>
.container {
    width: 500px;
    height: 250px;
    border: 2px solid black;
    border-radius: 5px;
    padding: 50px;
    padding-top: 0px;
    margin: auto;
    margin-top: 150px;
    background-image: url('../assets/image1.jpg');
    background-size: cover;
    /* 确保图片覆盖整个容器 */
    background-position: center;
    /* 将图片居中显示 */
    background-repeat: no-repeat;
    /* 避免图片重复 */
}
</style>